<template>
    <div class="con">
        <div class="min">
            <div class="top">
                <span class="btn" @click="getInto">&lt;</span>
                <span class="nav">人气推荐</span>
            </div>
            <div class="com">
                <div class="com-content" v-for="(item,index) in getStoreList" :key="index" @click="onClick(item)">
                    <div class="com-content-img">
                        <img :src="item.pic" alt="">
                    </div>
                    <p class="com-content-p1">{{item.name}}</p>
                    <p class="com-content-p2">{{item.characteristic}}</p>
                    <p class="com-content-p3">￥{{item.minPrice}}</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex'
    export default {
        computed: {
            ...mapState({
                getStoreList: state => state.homeSwiper.getStoreList
            }),

        },
        methods: {
            getInto() {
                this.$router.go(-1)
            },
            onClick(item){
                this.$router.push({
                    path:'/recommend-shopping-xiang',
                    query:{
                        item:item
                    }
                })
            }
        },
        mounted() {
            this.$store.dispatch('getStoreList')
        }
    }
</script>

<style lang='scss' scoped>
    .con {
        width: 100%;
        height: 100vh;
        overflow: scroll;
        .min {
            width: 100%;
            .top {
                width: 100%;
                height: 1rem;
                line-height: 1rem;
                font-size: 0.4rem;

                span {
                    display: inline-block;
                }

                .btn {
                    width: 1rem;
                    height: 1rem;
                    text-align: center;
                }

                .nav {
                    margin-left: 2rem;
                }
            }

            .com {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
                .com-content {
                    width: 48%;
                    .com-content-img {
                        width: 100%;
                        height: 4rem;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .com-content-p1 {
                        font-size: 0.25rem;
                    }

                    .com-content-p2 {
                        font-size: 0.23rem;
                        color: gray;
                    }

                    .com-content-p3 {
                        font-size: 0.23rem;
                        color: red;
                    }
                }
            }
        }
    }
</style>